<template>
  <el-dialog
    class="base-dialog"
    :custom-class="'panna-dialog_medium'"
    :title="title"
    :visible.sync="dialogFormVisible"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <p slot="title">{{ title }}</p>
    <el-form
      ref="formData"
      :model="formData"
      class="base-pipeline-layout"
      label-width="130px"
      :rules="formRules"
      status-icon
    >
      <el-form-item
        :label="airBottle.airBottleNumber"
        prop="num"
        style="width: 100%"
      >
        <el-input v-model="formData.num"></el-input>
      </el-form-item>
      <el-form-item
        :label="airBottle.airBottleRemark"
        prop="remark"
        style="width: 100%"
      >
        <el-input v-model="formData.remark"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="base-dialog-footer">
      <el-button :disabled="!submitLoad" type="primary" @click="submitForm">{{
        operateType.save
      }}</el-button>
      <el-button @click="handleClose">{{ operateType.cancel }}</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { create } from "../../../api/AirBottle/AirBottle";
import _ from "lodash";
export default {
  name: "AirBottleAdd",
  components: {},
  props: {
    dialogFormVisible: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      title: this.$t("AirBottle.addAirBottle"),
      submitLoad: true,
      formData: {
        Num: 0,
        reamrk: "",
      },
      formRules: {
        num: [
          {
            required: true,
            message: this.$t("AirBottle.airBottleNumberFilled"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    operateType() {
      return this.$t("ModuleSysBusiness.OperateType") || {};
    },
    airBottle() {
      return this.$t("AirBottle") || {};
    },
  },
  created() {},
  methods: {
    // 保存
    submitForm: _.throttle(function() {
      this.$refs["formData"].validate((valid) => {
        debugger;
        if (this.submitLoad) {
          this.submitLoad = false;
          if (valid) {
            create(this.formData)
              .then((res) => {
                this.$emit("getList", res.data);
                this.handleClose();
              })
              .catch((res) => {
                this.submitLoad = true;
              });
          } else {
            this.submitLoad = true;
          }
        }
      });
    }, 2000),

    // 关闭弹框
    handleClose() {
      this.$emit("update:dialogFormVisible", false);
      this.submitLoad = true;
    },
  },
};
</script>
